
<template>
  <el-dialog v-model="ifShow" title="其他操作" width="1000" :before-close="handleCancel">
    <el-radio-group v-model="activeKey" size="large">
      <el-radio-button label="订单操作" value="orderAction" />
      <el-radio-button label="状态更改" value="orderStatus" />
    </el-radio-group>

    <div v-if="activeKey == 'orderAction'" class="btn_case">
      <el-popconfirm title="确认加入抢单池吗?" @confirm="handleOrderPoolIn">
        <template #reference>
          <el-button type="primary" :disabled="orderStatus !== 2">加入抢单池</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="确认移出抢单池吗?" @confirm="handleOrderPoolOut">
        <template #reference>
          <el-button type="primary" :disabled="orderStatus !== 1">移出抢单池</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="确认抢单吗?" @confirm="handleCatchOrder">
        <template #reference>
          <el-button type="primary" :disabled="orderStatus !== 1">抢单</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="确认回收此订单?" @confirm="handleReclaimOrder">
        <template #reference>
          <el-button type="primary" :disabled="orderStatus !== 1 && orderStatus !== 2">车队回收订单</el-button>
        </template>
      </el-popconfirm>
    </div>

    <div v-if="activeKey == 'orderStatus'" class="btn_case">
      <el-popconfirm title="确认司机已经出发?" @confirm="handleUpdateStatus(1)">
        <template #reference>
          <el-button type="primary" :disabled="driverStatus >= 1 || orderStatus >= 3">已出发</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="确认司机已经就位?" @confirm="handleUpdateStatus(2)">
        <template #reference>
          <el-button type="primary" :disabled="driverStatus >= 2 || orderStatus >= 3">已就位</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="确认司机已经开始服务?" @confirm="handleUpdateStatus(3)">
        <template #reference>
          <el-button type="primary" :disabled="driverStatus >= 3 || orderStatus >= 3">开始服务</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm title="确认司机已经服务完成?" @confirm="handleUpdateStatus(4)">
        <template #reference>
          <el-button type="primary" :disabled="driverStatus >= 4 || orderStatus >= 3">服务完成</el-button>
        </template>
      </el-popconfirm>
      <div>
        <el-popconfirm title="确认此订单完成无误?" @confirm="handleCompleteOrder">
          <template #reference>
            <el-button type="primary" :disabled="orderStatus >= 3">完成订单</el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm title="确认把此订单退回渠道?" @confirm="handleCancelOrder">
          <template #reference>
            <el-button type="primary" :disabled="orderStatus >= 3">退回渠道</el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm title="确认作废此订单?" @confirm="handleOrderInvalid">
          <template #reference>
            <el-button type="primary" :disabled="orderStatus == 100">作废</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import CommonApi from "@/api/common";
import OrderApi from "@/api/order";

const props = defineProps<{}>();
const ifShow = ref(false);
const activeKey = ref("orderAction");
const orderId = ref();
const orderStatus = ref();
const driverStatus = ref();
const emit = defineEmits(["success"]);
function edit(row: any) {
  nextTick(() => {
    ifShow.value = true;
    orderStatus.value = row.status;
    driverStatus.value = row.driverStatus;
    orderId.value = row.id;
  });
}

/**
 * 加入抢单池
 */
function handleOrderPoolIn() {
  let data = {
    orderId: orderId.value,
  };
  OrderApi.orderPoolIn(data).then((data) => {
    if (data.code == 0) {
      ElMessage.success(data.message);
      handleCancel();
      emit("success");
    }
  });
}
/**
 * 移出抢单
 */
function handleOrderPoolOut() {
  let data = {
    orderId: orderId.value,
  };
  OrderApi.orderPoolOut(data).then((data) => {
    if (data.code == 0) {
      ElMessage.success(data.message);
      handleCancel();
      emit("success");
    }
  });
}
/**
 * 抢单
 */
function handleCatchOrder() {
  let data = { orderId: orderId.value };
  OrderApi.catchOrder(data).then((data) => {
    if (data.code == 0) {
      ElMessage.success(data.message);
      handleCancel();
      emit("success");
    }
  });
}
//回收订单
function handleReclaimOrder() {
  let data = {
    orderId: orderId.value,
  };
  OrderApi.orderReclaim(data).then((data) => {
    if (data.code == 0) {
      ElMessage.success(data.message);
      handleCancel();
      emit("success");
    }
  });
}
//更改司机状态
function handleUpdateStatus(status: number) {
  let data = {
    status,
    orderId: orderId.value,
  };
  OrderApi.updateDriverStatus(data).then((res) => {
    if (data.code == 0) {
      ElMessage.success(data.message);
      emit("success");
      driverStatus.value = status;
    }
  });
}
//完成订单
function handleCompleteOrder() {
  let data = {
    orderId: orderId.value,
  };
  OrderApi.orderComplete(data).then((data) => {
    if (data.code == 0) {
      ElMessage.success(data.message);
      handleCancel();
      emit("success");
    }
  });
}
//退回渠道
function handleCancelOrder() {
  let data = {
    orderId: orderId.value,
  };
  OrderApi.orderCancel(data).then((data) => {
    if (data.code == 0) {
      ElMessage.success(data.message);
      handleCancel();
      emit("success");
    }
  });
}
//订单作废
function handleOrderInvalid() {
  let data = {
    orderId: orderId.value,
  };
  OrderApi.orderInvalid(data).then((data) => {
    if (data.code == 0) {
      ElMessage.success(data.message);
      handleCancel();
      emit("success");
    }
  });
}

/**
 * 确定按钮点击事件
 */
async function handleOk() {}

/**
 * 取消按钮回调事件
 */
function handleCancel() {
  ifShow.value = false;
}

defineExpose({
  edit,
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
.btn_case {
  padding: 14px 0;
  .el-button {
    width: 100px;
    margin: 14px 14px 14px 0;
  }
}
</style>
